<script setup>
	import { watch } from 'vue'
	const props = defineProps({
		modelValue: {
			type: Object,
			default: () => ({
				apiKey: '',
				baseUrl: ''
			})
		}
	})

	const emit = defineEmits(['update:modelValue', 'change'])

	// 监听配置变化
	watch(
		() => props.modelValue,
		(newValue) => {
			emit('change', newValue)
		},
		{ deep: true }
	)
</script>

<template>
	<div class="grid grid-cols-2 gap-4">
		<a-form-item
			label="API密钥"
			name="config.apiKey"
			:rules="[{ required: true, message: '请输入API密钥' }]"
			class="col-span-2"
		>
			<a-input-password v-model:value="modelValue.apiKey" placeholder="请输入API密钥" />
		</a-form-item>
		<a-form-item
			label="基础地址"
			name="config.baseUrl"
			:rules="[{ required: true, message: '请输入基础地址' }]"
			class="col-span-2"
		>
			<a-input v-model:value="modelValue.baseUrl" placeholder="请输入基础地址" />
		</a-form-item>
	</div>
</template>
